var timer;
$(function () {
  $("#fullpage").fullpage({
    navigation: false,
    onLeave: function (index, nextIndex) {
      if (index == 1) {
        start();
      } else if (index == 2) {
        barrage(30);
      }
    },
  });
});

function start() {
  let str =
    " 什么是永远？有生之年就是永远。想要永远永远和你在一起，和你一起做很多很多事，和你在一起就会很开心很幸福。<br/>  这是和你过的第一个圣诞节，希望宝贝媳妇儿健健康康，快快乐乐，平平安安。宝贝媳妇儿圣诞节快乐！";
  let str_ = "";
  let i = 0;
  let content = document.getElementById("contents");
  timer = setInterval(() => {
    if (str_.length < str.length) {
      str_ += str[i++];
      content.innerHTML = "<p>" + str_ + "_</p>"; //打印时加光标
    } else {
      clearInterval(timer);
      content.innerHTML = "<p>" + str_ + "</p>";
    }
  }, 100);
}

const maxWidth =
  (document.documentElement.clientWidth || document.body.clientWidth) + 20;
const maxHeight =
  (document.documentElement.clientHeight || document.body.clientHeight) - 400;
const arr = [
  "哇，神仙老师！爱，狂粉。❤️ 👍5201314",
  "老师 Merry-Christmas。👍5201314",
  "祝老师圣诞节快乐呀！👍5201314",
  "老师真是漂亮呢，貌美如花，美若天仙，沉鱼落雁，闭月羞花呀。👍5201314",
  "老师您课上的真棒，我好喜欢你呀。👍5201314",
  "老师你怎么那么好看呀，肤白貌美大长腿！👍5201314",
  "小甜甜，我爱你（破音）👍5201314",
  "老师您的声音真甜，不知道人有没有声音甜呀。👍5201314",
];
const elements = [];
function barrage(num = 30) {
  const container = document.getElementById("barrages");
  if (!elements.length) {
    for (let i = 0; i <= num; i++) {
      const text = arr[Math.floor(Math.random() * arr.length)];
      const p = document.createElement("p");
      p.innerHTML = text;
      p.style.position = "absolute";
      p.style.width = "1500px";
      p.style.height = "50px";
      p.style.fontSize = "30px";
      render(p);
      elements.push(p);
      container.appendChild(p);
    }
  }
  elements.forEach((e) => {
    if (e.offsetLeft <= -300) {
      render(e);
    }
    e.style.left = e.offsetLeft - 5 + "px";
  });

  requestAnimationFrame(barrage);
}

function render(ele) {
  ele.style.color =
    "rgb(" +
    Math.floor(Math.random() * 255) +
    "," +
    Math.floor(Math.random() * 255) +
    "," +
    Math.floor(Math.random() * 255) +
    ")";
  ele.style.top = Math.floor(Math.random() * maxHeight) + "px";
  ele.style.left = maxWidth + Math.floor(Math.random() * 300) + "px";
}

/*
 * 1、图片缩放（随机，并且不是同时运动）
 * 1、从大到小
 * 2、从小到大，透明度从1到0（在第一步运动完成后立马开始）
 *
 * 2、图片旋转（随机，并且不是同时运动的。需要在全部运动走完以后开始）
 */

var btn = document.getElementById("btn");
// 选择所有元素
var imgs = document.getElementById("photoAlbum").children;
var endNum = 0; //它代表图片运动完成的数量
var canClick = true; //它代表用户能否再次点击

btn.onclick = function () {
  if (!canClick) {
    return; //以下的代码不要走了
  }
  canClick = false;

  for (var i = 0; i < imgs.length; i++) {
    (function (i) {
      setTimeout(function () {
        motion(
          imgs[i],
          "50ms",
          function () {
            this.style.transform = "scale(0)";
          },
          function () {
            motion(
              this,
              "1s",
              function () {
                this.style.transform = "scale(1)";
                this.style.opacity = "0";
              },
              function () {
                //在这里表示图片缩放的运动已经全部完成了，接着走第二个运动

                endNum++;
                if (endNum == imgs.length) {
                  //所有的运动都完成了
                  //console.log('所有的运动都完成了')
                  rotate();
                  //endNum=0;
                }
              }
            );
          }
        );
      }, Math.random() * 1000);
    })(i);
  }
};

//旋转功能
function rotate() {
  for (var i = 0; i < imgs.length; i++) {
    //给运动来一下初始化
    imgs[i].style.transition = "";
    /*imgs[i].style.opacity=1;*/
    imgs[i].style.transform =
      "rotateY(0deg) translateZ(-" + Math.random() * 500 + "px)";

    //运动来了，自执行函数
    (function (i) {
      setTimeout(function () {
        motion(
          imgs[i],
          "2s",
          function () {
            this.style.opacity = 1;
            this.style.transform = "rotateY(-360deg) translateZ(0)";
          },
          function () {
            endNum--; //因为在上次运动结束的时候，endNum的值已经加到了50了
            //console.log(endNum);
            if (endNum == 0) {
              //所有的运动都完成了
              canClick = true;
              //endNum=0
            }
          }
        );
      }, Math.random() * 1000);
    })(i);
  }
}

//运动函数
function motion(obj, timer, doFn, callBack) {
  //motion(运动对象,运动时间(字符串+单位),运动属性(函数),运动结束后的回调函数)
  obj.style.transition = timer;
  doFn.call(obj); //改变对象

  var end = true; //用来知道过渡有没有完成一次

  //结束事件处理函数
  function endFn() {
    if (end) {
      //callBack&&callBack.call(obj);
      if (callBack) {
        callBack.call(obj);
      }

      end = false; //改成false，下次就不会走这个if了
    }

    obj.removeEventListener("transitionend", endFn); //结束后就把这个事件取消掉，要不它会一直带在身上
  }

  obj.addEventListener("transitionend", endFn);
}
